<template>
  <div>
    <el-dialog
      v-bind="$attrs"
      :title="showTitle"
      :visible="showdialog"
      v-on="$listeners"
      @open="onOpen"
      @close="onClose"
    >
      <el-form
        ref="formDataRef"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="部门名称" prop="name">
          <el-input
            v-model="formData.name"
            placeholder="请输入部门名称"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input
            v-model="formData.code"
            placeholder="请输入部门编码"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item label="部门负责人" prop="manager">
          <el-select
            v-model="formData.manager"
            placeholder="请选择部门负责人"
            clearable
            :style="{ width: '100%' }"
            @focus="getEmployeeSimple"
          >
            <el-option
              v-for="(item, index) in managerOptions"
              :key="index"
              :label="item.username"
              :value="item.username"
              :disabled="item.disabled"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce">
          <el-input
            v-model="formData.introduce"
            type="textarea"
            placeholder="请输入部门介绍"
            :autosize="{ minRows: 4, maxRows: 4 }"
            :style="{ width: '100%' }"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 导入 获取 公司部门 获取 接口
import {
  getDepartments,
  addDepartmentById,
  getDepartmentById,
  editDepartmentById
} from '@/api/departments.js'
// 导入 获取 公司员工 简单 数据 接口
import { getEmployeeSimple } from '@/api/employees.js'
export default {
  components: {},
  inheritAttrs: false,
  props: {
    showdialog: {
      type: Boolean
    },
    currentNode: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    // 对于 当前 部门 下 所有 子节点的 名称 进行重名判断
    // 其中 some 也是 返回一个 满足条件的 boolean值
    const checkNameRepeat = async(rule, value, callBack) => {
      //    方法1 检查同级 部门 中是否有同样的 名称(利用 本地数据 进行 校验 )
      // const borthers = this.currentNode.children
      // console.log('这是兄弟部门', borthers)
      // const isRepeat = borthers.some((t) => t.name === value)
      // // 表示 找到了 相同名称的部门
      // isRepeat ? callBack(new Error('存在重名的部门了')) : callBack()
      //    方法2 检查 同级 部门 是否存在 有一样的 部门名称 (从服务端 实时获取数据 进行数据 校验)
      // 调用 远程接口 进行获取 到服务端 公司部门 数据
      const { depts } = await getDepartments()
      // 获取 到当前 点击部门 的子部门
      let children
      if (this.formData.id) {
        // 编辑部门 下的校验规则
        children = depts.filter(
          (e) => e.pid === this.currentNode.id && e.id !== this.formData.id
        )
      } else {
        // 新增部门
        children = depts.filter((e) => e.pid === this.currentNode.id)
      }
      console.log('服务端公司部门 数据', depts)
      if (children.some((t) => t.name === value)) {
        callBack(new Error('存在重名的公司部门了'))
      } else {
        callBack()
      }
    }
    // 对于 当前 部门下 所有 子节点 中code 编码 进行重名判断
    const checkCodeRepeat = async(rule, value, callBack) => {
      const { depts } = await getDepartments()
      // 获取 到当前 点击部门 的子部门
      let isRepeat
      if (this.formData.id) {
        isRepeat = depts.some(
          (t) => t.code === value && value && t.id !== this.formData.id
        )
      } else {
        isRepeat = depts.some((t) => t.code === value)
      }
      // children.some((t) => t.code === value)
      isRepeat ? callBack(new Error('存在重复的部门编码了')) : callBack()
      console.log('服务端公司部门 数据', depts)
    }
    return {
      // 表单数据 对象
      formData: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      },
      // 校验表单规则
      rules: {
        name: [
          {
            required: true,
            message: '请输入部门名称',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 50,
            message: '长度在1到50个字符',
            trigger: 'blur'
          },
          {
            validator: checkNameRepeat,
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '请输入部门编码',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 50,
            message: '长度在1到50个字符',
            trigger: 'blur'
          },
          {
            validator: checkCodeRepeat,
            trigger: 'blur'
          }
        ],
        manager: [
          {
            required: true,
            message: '请选择部门负责人',
            trigger: 'change'
          }
        ],
        introduce: [
          {
            required: true,
            message: '请输入部门介绍',
            trigger: 'blur'
          },
          { min: 1, max: 300, message: '长度在1到300个字符', trigger: 'blur' }
        ]
      },
      // 将是 获取 到的所有 员工 名称 与 id
      managerOptions: []
    }
  },
  computed: {
    showTitle() {
      return this.formData.id ? '编辑部门' : '添加部门'
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onOpen() {},
    onClose() {
      // 点击 之后 清除 用户 校验 数据 这样防止 存在缓存 导致 我们共用一个 弹出层后 出现问题。
      // 我们点击编辑后的 formData 的时候 和之前表单校验的数据是不一样的。因此 在这里使用
      // resetfileds 方法只对 原来的 进行 表单校验的 数据 进行 校验
      // 这里使用了 一个 关于 $options 的方法
      this.formData = this.$options.data().formData
      console.log(this.formData)
      this.$refs['formDataRef'].resetFields()
    },
    // 点击 关闭 弹层
    close() {
      this.$emit('update:visible', false)
    },
    handelConfirm() {
      this.$refs['formDataRef'].validate(async(valid) => {
        try {
          if (valid) {
            if (this.formData.id) {
              console.log('我经过了这里编辑')
              await editDepartmentById(this.formData)
            } else {
              // 来请求 添加 部门 接口
              await addDepartmentById({
                ...this.formData,
                pid: this.currentNode.id
              })
            }
            // 刷新页面
            this.$emit('updata:getDepartments')
            this.close()
          } else {
            return
          }
        } catch (error) {
          console.log(error)
        }
      })
    },
    // 获取 员工 简单 数据 以便可以选择 到 负责人
    async getEmployeeSimple() {
      this.managerOptions = await getEmployeeSimple()
    },
    // 获取 到 当前 点击 的部门 点击 编辑的时候 渲染到 弹出层
    async getDepartment(currentNode) {
      this.formData = await getDepartmentById(currentNode.id)
      // const res = this.$options.data().formData、
      // 这里的 this.$options 是获取到 data 没有被修改的 数据
      console.log('这是点击编辑之后', this.$options.data())
    }
  }
}
</script>
<style>
</style>
